//在这install的情况下 我们阻塞请求 然后去掉caches 把相关文件扔到cacheStorage
//这个 e.waitUntil 其实会接受一个promise对象 直到这个promise对象返回成功之后 才会进行service worker 后续的运行
self.addEventListener('install',function (e) {
    e.waitUntil(
        // 做缓存的事情
        caches.open('app-v1')//这个是promise对象
            .then((cache)=>{ //获取到的cache文件 全都加到我的cache当中
                console.log('open cache');
                // 那些文件要加呢 就是我们要用到的资源
                return cache.addAll([
                    './app.js',
                    '../../public/index.html'
                ])//当我们把所有的资源都加完后 他会继续service worker 的生命周期
            })
    )
});
//这样的话 相当于我们的cacheStorage中 已经有个相关的缓存  那我们应该怎么读呢？
//service worker有个fetch事件，通过fech事件 我们可以去请求拦截和响应的一个伪造，而不是每次都发相关的请求网络，如果在fetch
//这一块我们将请求拦截下来 相当于在浏览器层面对所有的请求 进行了一个代理 然后可以在 浏览器层面service worker中对这个请求
// 的返回 进行一个伪造 和改变

//通过service worker监听所以向网路中发送的请求 通过fetch 拦截下来 然后通过
// e.respondWith这个方法 改变请求的返回  改变的过程就是 通过match这个方法 对比  网络请求的这个文件缓存中有木有
// 如果有就走缓存 return res 如果没有 就走网络请求
self.addEventListener('fetch',function (e) {
    e.respondWith(
        // 读他的缓存   e.request=网络请求什么文件  caches.match=网络请求的这个文件缓存中有木有
        caches.match(e.request).then((res)=>{
            if(res){
                return res;
            }else {
                // 如果缓存中木有 就通过 fetch 方法向网络中发起请求
                // fetch(url).then((res)=>{
                //     if(res){
                //         // 如果拿到新请求的 就存到我们cacheStorage中
                //     }else {
                //         // 用户提示
                //     }
                // })
            }

        })
    )
